@charset "UTF-8";

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}



@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}


@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -moz-transform: scale3d(0.3, 0.3, 0.3);
        -ms-transform: scale3d(0.3, 0.3, 0.3);
        -o-transform: scale3d(0.3, 0.3, 0.3);
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -moz-transform: scale3d(0.3, 0.3, 0.3);
        -ms-transform: scale3d(0.3, 0.3, 0.3);
        -o-transform: scale3d(0.3, 0.3, 0.3);
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}


@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -moz-transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0);
        -ms-transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0);
        -o-transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0);
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, 0, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, 0, 0);
    }

    50% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -moz-transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0);
        -ms-transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0);
        -o-transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0);
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, 0, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, 0, 0);
    }

    50% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -moz-transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0);
        -ms-transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0);
        -o-transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0);
        -webkit-transform: scale3d(.3, .3, .3) translate3d(100%, 0, 0);
        transform: scale3d(.3, .3, .3) translate3d(100%, 0, 0);
    }

    50% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -moz-transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0);
        -ms-transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0);
        -o-transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0);
        -webkit-transform: scale3d(.3, .3, .3) translate3d(100%, 0, 0);
        transform: scale3d(.3, .3, .3) translate3d(100%, 0, 0);
    }

    50% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes rubberBand {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) scale3d(1, 1, 1);
        transform: translate3d(0, -100%, 0) scale3d(1, 1, 1);
    }

    30% {
        opacity: 0.3;
        -webkit-transform: translate3d(0, -70%, 0) scale3d(1.25, 0.75, 1);
        transform: translate3d(0, -70%, 0) scale3d(1.25, 0.75, 1);
    }

    40% {
        opacity: 0.4;
        -webkit-transform: translate3d(0, -60%, 0) scale3d(0.75, 1.25, 1);
        transform: translate3d(0, -60%, 0) scale3d(0.75, 1.25, 1);
    }

    50% {
        opacity: 0.5;
        -webkit-transform: translate3d(0, -50%, 0) scale3d(1.15, 0.85, 1);
        transform: translate3d(0, -50%, 0) scale3d(1.15, 0.85, 1);
    }

    65% {
        opacity: 0.6;
        -webkit-transform: translate3d(0, -35%, 0) scale3d(.95, 1.05, 1);
        transform: translate3d(0, -35%, 0) scale3d(.95, 1.05, 1);
    }

    75% {
        opacity: 0.75;
        -webkit-transform: translate3d(0, -25%, 0) scale3d(1.05, .95, 1);
        transform: translate3d(0, -25%, 0) scale3d(1.05, .95, 1);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) scale3d(1, 1, 1);
        transform: translate3d(0, -100%, 0) scale3d(1, 1, 1);
    }

    30% {
        opacity: 0.3;
        -webkit-transform: translate3d(0, -70%, 0) scale3d(1.25, 0.75, 1);
        transform: translate3d(0, -70%, 0) scale3d(1.25, 0.75, 1);
    }

    40% {
        opacity: 0.4;
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        opacity: 0.5;
        -webkit-transform: translate3d(0, -50%, 0) scale3d(1.15, 0.85, 1);
        transform: translate3d(0, -50%, 0) scale3d(1.15, 0.85, 1);
    }

    65% {
        opacity: 0.6;
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        opacity: 0.75;
        -webkit-transform: translate3d(0, -25%, 0) scale3d(1.05, .95, 1);
        transform: translate3d(0, -25%, 0) scale3d(1.05, .95, 1);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes plus2 {
    from {
        -webkit-transform: scale3d(0.8, 0.8, 0.8);
        -moz-transform: scale3d(0.8, 0.8, 0.8);
        -ms-transform: scale3d(0.8, 0.8, 0.8);
        -o-transform: scale3d(0.8, 0.8, 0.8);
        transform: scale3d(0.8, 0.8, 0.8);
    }

    to {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
        -moz-transform: scale3d(1.0, 1.0, 1.0);
        -ms-transform: scale3d(1.0, 1.0, 1.0);
        -o-transform: scale3d(1.0, 1.0, 1.0);
        transform: scale3d(1.0, 1.0, 1.0);
    }
}

@keyframes plus2 {
    from {
        -webkit-transform: scale3d(0.8, 0.8, 0.8);
        -moz-transform: scale3d(0.8, 0.8, 0.8);
        -ms-transform: scale3d(0.8, 0.8, 0.8);
        -o-transform: scale3d(0.8, 0.8, 0.8);
        transform: scale3d(0.8, 0.8, 0.8);
    }

    to {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
        -moz-transform: scale3d(1.0, 1.0, 1.0);
        -ms-transform: scale3d(1.0, 1.0, 1.0);
        -o-transform: scale3d(1.0, 1.0, 1.0);
        transform: scale3d(1.0, 1.0, 1.0);
    }
}

.plus2 {
    -webkit-animation-name: plus2;
    animation-name: plus2;
}

@-webkit-keyframes reduce {
    from {
        -webkit-transform: scale3d(6, 6,6);
        -moz-transform: scale3d(2, 2, 2);
        -ms-transform: scale3d(2, 2, 2);
        -o-transform: scale3d(2, 2, 2);
        transform: scale3d(3, 3, 3);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes reduce {
    from {
        -webkit-transform: scale3d(6, 6,6);
        -moz-transform: scale3d(2, 2, 2);
        -ms-transform: scale3d(2, 2, 2);
        -o-transform: scale3d(2, 2, 2);
        transform: scale3d(3, 3, 3);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.reduce {
    -webkit-animation-name: reduce;
    animation-name: reduce;
}

@-webkit-keyframes tcc {
    from {
        top: 0px;
        opacity: 1;
    }

    50% {
        top: 270px;
        opacity: 0.5;
    }

    to {
        top: 540px;
        opacity: 0;
    }
}

@keyframes tcc {
    from {
        top: 0px;
        opacity: 1;
    }

    50% {
        top: 270px;
        opacity: 0.5;
    }

    to {
        top: 540px;
        opacity: 0;
    }
}

.tcc {
    -webkit-animation-name: tcc;
    animation-name: tcc;
}

@-webkit-keyframes tcb {
    from {
        top: -137px;
        opacity: 1;
    }

    50% {
        top: 270px;
        opacity: 0.5;
    }

    to {
        top: 540px;
        opacity: 0;
    }
}

@keyframes tcb {
    from {
        top: -137px;
        opacity: 1;
    }

    50% {
        top: 270px;
        opacity: 0.5;
    }

    to {
        top: 540px;
        opacity: 0;
    }
}

.tcb {
    -webkit-animation-name: tcb;
    animation-name: tcb;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes circleProgressLoad_right {
    0% {
        border-top: 0.05rem solid #fff;
        border-right: 0.05rem solid #fff;
        -webkit-transform: rotate(45deg);
    }

    50% {
        border-top: 0.05rem solid #eb5344;
        border-right: 0.05rem solid #eb5344;
        border-left: 0.05rem solid #eb5344;
        border-bottom: 0.05rem solid #eb5344;
        -webkit-transform: rotate(225deg);
    }

    100% {
        border-left: 0.05rem solid #eb5344;
        border-bottom: 0.05rem solid #eb5344;
        -webkit-transform: rotate(225deg);
    }
}

@keyframes circleProgressLoad_right {
    0% {
        border-top: 0.05rem solid #fff;
        border-right: 0.05rem solid #fff;
        -webkit-transform: rotate(45deg);
    }

    50% {
        border-top: 0.05rem solid #eb5344;
        border-right: 0.05rem solid #eb5344;
        border-left: 0.05rem solid #eb5344;
        border-bottom: 0.05rem solid #eb5344;
        -webkit-transform: rotate(225deg);
    }

    100% {
        border-left: 0.05rem solid #eb5344;
        border-bottom: 0.05rem solid #eb5344;
        -webkit-transform: rotate(225deg);
    }
}

@-webkit-keyframes circleProgressLoad_left {

    0% {
        border-top: 0.05rem solid #fff;
        border-right: 0.05rem solid #fff;
        -webkit-transform: rotate(45deg);
    }

    50% {
        border-top: 0.05rem solid #fff;
        border-right: 0.05rem solid #fff;
        border-left: 0.05rem solid #fff;
        border-bottom: 0.05rem solid #fff;
        -webkit-transform: rotate(45deg);
    }

    100% {
        border-top: 0.05rem solid #eb5344;
        border-right: 0.05rem solid #eb5344;
        border-bottom: 0.05rem solid #eb5344;
        border-left: 0.05rem solid #eb5344;
        -webkit-transform: rotate(225deg);
    }
}
@keyframes circleProgressLoad_left {
    0% {
        border-top: 0.05rem solid #fff;
        border-right: 0.05rem solid #fff;
        -webkit-transform: rotate(45deg);
    }

    50% {
        border-top: 0.05rem solid #fff;
        border-right: 0.05rem solid #fff;
        border-left: 0.05rem solid #fff;
        border-bottom: 0.05rem solid #fff;
        -webkit-transform: rotate(45deg);
    }

    100% {
        border-top: 0.05rem solid #eb5344;
        border-right: 0.05rem solid #eb5344;
        border-bottom: 0.05rem solid #eb5344;
        border-left: 0.05rem solid #eb5344;
        -webkit-transform: rotate(225deg);
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform:  rotate(360deg);
        -ms-transform:  rotate(360deg);
        -o-transform:  rotate(360deg);
        transform:  rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform:  rotate(360deg);
        -ms-transform:  rotate(360deg);
        -o-transform:  rotate(360deg);
        transform:  rotate(360deg);
    }
}

.rotate {
    -webkit-animation-name: rotate;
    animation-name: rotate;
}

/*===翻页效果 下一页====*/
@-webkit-keyframes flipNext {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 45deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 45deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 20deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    }

    to {
        -webkit-transform: perspective(400px) ;
        transform: perspective(400px)  ;
    }
}

@keyframes flipNext {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 45deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 45deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 20deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    }

    to {
        -webkit-transform: perspective(400px) ;
        transform: perspective(400px)  ;
    }
}

.flipNext {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipNext;
    animation-name: flipNext;
}

/*===翻页效果 上一页====*/
@-webkit-keyframes flipPre {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -45deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -45deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    }

    to {
        -webkit-transform: perspective(400px) ;
        transform: perspective(400px)  ;
    }
}

@keyframes flipPre {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -45deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -45deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    }

    to {
        -webkit-transform: perspective(400px) ;
        transform: perspective(400px)  ;
    }
}

.flipPre {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipPre;
    animation-name: flipPre;
}
